<script setup lang="ts">
  import { ref, reactive } from "vue"
  import { getLevelList, getLevelTree, getLevelDelete } from '@/api/Level'
  import { createMessage } from '@/Public-UIlibrary/pb-message/method'
  import LevelModal from './components/LevelModal.vue'
  let pages = reactive({
    currentPage: 1,
    pageSize: 15,
    total: 0,
  })
  let loading = ref(false)
  const LevelModalRef = ref()
  const leveFormRef = ref()
  let levelListData = reactive([

  ])
  const column = [{

    key: 'tenantLevelName',
    name: '层级名称',
  },
  {
    key: 'parentTenantLevelName',
    name: '父级层级',
  },
  {
    key: 'createTime',
    name: '创建时间',

  },
  {
    key: 'description',
    name: '备注',
  },
  {
    slot: 'operation',
    name: '操作',
    width: 200,
  }]
  const levelSearchForm = reactive({
    parentTenantLevelId: '',
    tenantLevelName: '',
    beginDate: '',
    endDate: ''
  })

  let levelTree = ref([])
  const onInit = () => {
    getLevelListApi()
    getLevelTreeApi()
  }
  // 确认删除
  const onConfirmDelete = ({ tenantLevelId }) => {
    getLevelDeleteApi(tenantLevelId)

  }
  const onSearch = () => {
    getLevelListApi()
  }
  // 编辑 
  const onEdit = (row) => {
    console.log(LevelModalRef);
    LevelModalRef.value.onShow(row)

  }
  // 选中树节点
  const treeNodeClick = ({ curNode }) => {

    levelSearchForm.parentTenantLevelId = curNode.tenantLevelId
    getLevelListApi()
  }
  const onReset = () => {
    pages.currentPage = 1

    leveFormRef.value.resetFields()
    getLevelListApi()
  }
  // 修改或添加成功
  const onConfirmModal = () => {
    getLevelListApi()
  }
  // 获取层级接口
  const getLevelListApi = async () => {
    loading.value = true
    let { total, ...arg } = pages
    let res = await getLevelList(
      {
        ...arg,
        sortingFields: [{
          field: "",
          order: ""
        }],
        ...levelSearchForm
      }
    )
    loading.value = false
    if (res.code == 2000) {
      pages.total = res.data.total
      levelListData = [...res.data.records]

    }
  }
  // 获取层级树接口
  const getLevelTreeApi = async () => {
    let res = await getLevelTree({})
    if (res.code == 2000) {
      levelTree.value = [res.data]
      console.log(levelTree);

      // console.log(levelList)
    }
  }
  //  删除层级
  const getLevelDeleteApi = async (tenantLevelId) => {
    let res = await getLevelDelete({
      tenantLevelId
    })
    if (res.code == 200) {
      createMessage({
        message: '删除成功',
        type: 'success'
      })
    }
  }
  onMounted(() => {
    onInit()
  })
</script>

<template>
  <div class="app-container flex flex-col">
    <SearchCard @onSearch="onSearch" @onReset="onReset">
      <el-form :model="levelSearchForm" ref="leveFormRef" label-width="auto" :inline="true">
        <el-form-item label="创建时间">
          <pb-input v-model="levelSearchForm.roleName" placeholder="请输入角色名称" />
        </el-form-item>
        <el-form-item label="层级名称" prop="tenantLevelName">
          <pb-input v-model="levelSearchForm.tenantLevelName" placeholder="请输入层级名称" />
        </el-form-item>
      </el-form>
    </SearchCard>
    <pb-card padding="0px" class="flex flex-1">

      <ContentLeftTree :treeData="levelTree" label="tenantLevelName" @nodeClick="treeNodeClick"></ContentLeftTree>
      <pb-card width="84%">
        <pb-table :tableData='levelListData' :loading="loading" :column='column'>
          <template v-slot:operation="scope">
            <div class="flex">
              <pb-button text class="mr-6" @click="onEdit(scope.row)">编辑</pb-button>
              <PopconfirmButton @confirm="onConfirmDelete(scope.row)"></PopconfirmButton>
            </div>
          </template>
        </pb-table>
        <pb-pagination v-model:currentPage="pages.currentPage" v-model:pageSize="pages.pageSize"
          @onChange="onPagesChange" :total="pages.total"></pb-pagination>
      </pb-card>
    </pb-card>
    <LevelModal ref="LevelModalRef" @onConfirmModal="onConfirmModal"></LevelModal>
  </div>
</template>

<style lang="less" scoped></style>